<script setup>
    import { watch,ref,reactive } from 'vue'

    //搜索关键字
     const keyword=ref('')

    // //监视keyword的变化
    // //只要keyword变了，每次都会执行watch的回调函数
    // watch(keyword,(newVal,oldVal)=>{
    //   console.log('keyword变了')
    //   console.log(newVal,oldVal)
    // })

    //响应式对象
    const obj=reactive({
      username: '',
      password: ''
    })

    //监视obj的变化
    watch(obj,(newVal,oldVal)=>{
      console.log('obj变了')
      console.log(newVal,oldVal)  //指向同一个对象，值一样
      console.log(newVal===oldVal) //true
      console.log(newVal===obj) //true
    })
</script>

<template>
<div>
  <!-- <input type="text" v-model="keyword" placeholder="请输入关键字"> -->
  <br>
  <br>
  <input type="text" v-model="obj.username" placeholder="请输入用户名">
  <br>
  <br>

  <input type="text" v-model="obj.password" placeholder="请输入密码">
</div>
</template>

<style scoped>

</style>